import React, { useState } from 'react';
import { Row, Col, Checkbox, Select, Input, } from 'antd';
import GapBlock from '@/components/GapBlock';

const ModalContent = props => {
  const [type, setType] = useState('0')
  const result = [{
    roleType: 1
  }, {
    roleType: 2
  }]
  return (
    <>
      <Row>
        <Col span={8} style={{textAlign: 'right', color: 'rgba(0, 0, 0, 0.85)'}}>角色对象: &nbsp;</Col>
        <Col span={16}>
          <Checkbox.Group>
            <Checkbox value={1}>员工</Checkbox>
            <Checkbox value={2}>会员</Checkbox>
            <Checkbox value={3}>渠道商</Checkbox>
          </Checkbox.Group>
        </Col>
      </Row>
      <Row style={{padding: '20px 0', marginTop: 10}}>
        <Col span={8} style={{textAlign: 'right', color: 'rgba(0, 0, 0, 0.85)'}}>提成方式: &nbsp;</Col>
        <Col span={16}>
          <Row>
            <Col span={10}>
              <Select defaultValue="0" onChange={val => setType(val)}>
                <Select.Option value={'0'}>比例</Select.Option>
                <Select.Option value={'1'}>定额</Select.Option>
              </Select>
            </Col>
            <Col span={10}><Input addonAfter={type == 0 ? '%' : '元'} /></Col>
          </Row>
        </Col>
      </Row>
    </>
  );
};

export default ModalContent;